<template>
  <view class="demo-container">
    <view class="section">
      <text class="section-title">基础用法</text>
      <CountDown 
        :initialSeconds="60" 
        @finish="handleFinish('基础倒计时')"
      />
    </view>

    <view class="section">
      <text class="section-title">自定义样式</text>
      <CountDown 
        :initialSeconds="120" 
        unit="秒"
        numberSize="50rpx"
        numberColor="#409eff"
        unitSize="30rpx"
        unitColor="#409eff"
        containerBg="#ecf5ff"
        borderRadius="10rpx"
        @finish="handleFinish('自定义样式倒计时')"
      />
    </view>

    <view class="section">
      <text class="section-title">长倒计时（分:秒格式）</text>
      <CountDown 
        :initialSeconds="300" 
        @finish="handleFinish('长倒计时')"
      />
    </view>

    <view class="section">
      <text class="section-title">动态修改倒计时</text>
      <CountDown 
        :initialSeconds="dynamicSeconds" 
        @finish="handleFinish('动态倒计时')"
      />
      <view class="button-group">
        <button @click="setSeconds(30)">设置30秒</button>
        <button @click="setSeconds(60)">设置60秒</button>
        <button @click="setSeconds(120)">设置120秒</button>
      </view>
    </view>

    <view class="finish-notice" v-if="finishNotice">
      {{ finishNotice }} 已结束！
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 导入倒计时组件
import CountDown from '../../components/CountDown/CountDown.vue'  // 假设你的倒计时组件文件名为CountDown.vue

// 动态倒计时秒数
const dynamicSeconds = ref(60)
// 结束提示信息
const finishNotice = ref('')

// 设置倒计时秒数
const setSeconds = (seconds) => {
  dynamicSeconds.value = seconds
}

// 处理倒计时结束事件
const handleFinish = (name) => {
  finishNotice.value = name
  // 3秒后清除提示
  setTimeout(() => {
    finishNotice.value = ''
  }, 3000)
}
</script>

<style scoped>
.demo-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.section {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.button-group {
  display: flex;
  gap: 15rpx;
  margin-top: 20rpx;
}

button {
  padding: 15rpx 20rpx;
  font-size: 26rpx;
  background-color: #f5f5f5;
  border: none;
  border-radius: 6rpx;
}

.finish-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 30rpx 50rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  z-index: 100;
  animation: fade 3s ease-out;
}

@keyframes fade {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
</style>